/**
 * @desc:申请退货弹框
 */

import { Form, Input, Select } from 'antd';
import { find } from 'lodash';
import CommonModal from '@/components/CommonModal';
import CommonImgsLoad from '@/components/CommonImgsLoad';

const { TextArea } = Input;

const { Option } = Select;

const layout = { //发布表单排布
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 17,
  }
};

export default ({ visible, flag, item = {}, expressList, refundOrderGoodsIds, handleOk, handleCancel }) => {

  const [form] = Form.useForm();
  const { id, channelId, refundVoucher } = item;

  const onOk = () => {
    form.validateFields()
      .then(val => {
        const { logisticsId, img } = val;
        let postRefundVoucher = ''
        const arr = [];
        if(img) {
          if(img.length){
            img.map(v => {
              if(v.status == 'done') {
                if(v.url) {
                  arr.push(v.url);
                } else {
                  const url = v.response.data.fullPath;
                  arr.push(url);
                }
              }
            })
            postRefundVoucher = arr.join(',')
          }else{//删除完毕
            postRefundVoucher = ''
          }
        }else{
          if(refundVoucher){
            postRefundVoucher = JSON.parse(refundVoucher).join(',')
          }
        }
        const obj = find(expressList, ['id', logisticsId]);
        const params = {
          ...val,
          refundVoucher: postRefundVoucher,
          logisticsCompany: obj.name,
          img: undefined
        };
        if(flag){//重新申请
          params.refundOrderIds = [id];
        }else if(channelId === 0){//编辑且为直发
          params.refundOrderId = id;
          params.refundOrderGoodsIds = refundOrderGoodsIds;
        }
        handleOk(params);
      }).catch(err => console.log(err))
  }

  const optionExpress = expressList.map(d => (
    <Option key={d.id} value={d.id}>
      {d.name}
    </Option>
  ));

  const getImgArr = (val) => {
    const arr = [];
    if(val) {
      // const arr1 = val.join(',');
      const arr1 = JSON.parse(val);
      arr1.map((v, index) => {
        arr.push({
          name: `凭证${index+1}`,
          url: v,
          status: 'done',
          uid: index,
        })
      })
      return arr
    } else {
      return [];
    }
  }

  const handleUpLoadOk = (val) => {
    form.setFieldsValue({
      img: val,
    })
  }

  return (
    <CommonModal
      title="编辑退货单"
      width="458px"
      visible={visible}
      onOk={onOk}
      onCancel={handleCancel}
    >
      <Form
        {...layout}
        form={form}
        initialValues={{
          logisticsId: item.logisticsId,
          logisticsNo: item.logisticsNo,
          refundReason: item.refundReason
        }}
        name='order-print-setpackage'
      >
        <Form.Item
          label="退回快递"
          name="logisticsId"
          rules={[{ required: true, message: '请选择退回快递', }]}
        >
          <Select
            showSearch
            placeholder="请选择退回快递"
            optionFilterProp='children'
            allowClear
            style={{ width: '274px' }}
          >
            {optionExpress}
          </Select>
        </Form.Item>
        <Form.Item
          label="退回快递单号"
          name="logisticsNo"
          rules={[
            { required: true, message: '请输入退回快递单号' },
            { pattern: /^\w{1,100}$/, message: '只能输入字母和数字' },
          ]}
        >
          <Input placeholder="请输入退回快递单号" style={{ width: '274px' }} maxLength={20} />
        </Form.Item>
        <Form.Item
          label="退货原因"
          name="refundReason"
          rules={[{ required: false, message: '请选择退回快递', }]}
        >
          <TextArea style={{ width: '274px' }} showCount maxLength="50" rows="3" placeholder="最多输入50个字符" />
        </Form.Item>
        <Form.Item
          label="退货凭据"
          name="img"
        >
          <CommonImgsLoad maxCount={3} fileList={getImgArr(refundVoucher)} handleOk={ handleUpLoadOk } />
        </Form.Item>
      </Form>
    </CommonModal>
  )
}